import { getData } from '@/servers/http'
import styles from './index.module.less'
import { useEffect, useState } from 'react'
import classNames from 'classnames'
import { Toast } from 'antd-mobile'
import { setLocalStorage } from '@/storage'
import { history } from 'umi'
import { getPlatformList } from '../api'

interface IProps {}

/**  选择平台   */
const ChooseAPlatform: React.FC<IProps> = () => {
    const [platformData, setPlatformData] = useState([])
    const [active, setActive] = useState('')
    /**  是否显示子集  */
    const [showChildrenList, setShowChildrenList] = useState([])

    useEffect(() => {
        ;(() => {
            getPlatformList().then(res => {
                const { data } = res?.data
                setPlatformData(data)
            })
        })()
    }, [])

    return (
        <div className={styles.chooseAPlatform_page}>
            <div className={styles.choice}>选择平台</div>
            <div className={styles.box}>
                {platformData.map((it: any) => {
                    return (
                        <div key={it?.id} className={styles.content}>
                            <div
                                className={classNames(styles.item, it.id === active ? styles.active : '')}
                                key={it.id}
                                onClick={() => {
                                    if (it.is_jump === 0) {
                                        Toast.show('该站点暂未被部署！')
                                        return
                                    }
                                    if (it.is_jump === 1) {
                                        const { name, url } = it
                                        setShowChildrenList([])
                                        setActive('')
                                        setLocalStorage('CHOOSE_PLATFORM_SITE', JSON.stringify({ name, url }))
                                        history.push('/workbench')
                                    }

                                    if (it.is_jump === 2) {
                                        setShowChildrenList(it.children)
                                        setActive(it.id)
                                    }
                                }}
                            >
                                <span>{it?.name}</span>
                            </div>
                        </div>
                    )
                })}
            </div>
            {Boolean(showChildrenList?.length) && (
                <div className={styles.children_box}>
                    {showChildrenList.map((item: any) => {
                        return (
                            <div
                                className={styles.item}
                                key={item.name}
                                onClick={() => {
                                    const { name, url } = item
                                    setLocalStorage('CHOOSE_PLATFORM_SITE', JSON.stringify({ name, url }))
                                    history.push('/workbench')
                                }}
                            >
                                <span>{item?.name}</span>
                            </div>
                        )
                    })}
                </div>
            )}
        </div>
    )
}

export default ChooseAPlatform
